<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String corpId = (String)request.getAttribute("corpId");
    String corpSecret = (String)request.getAttribute("corpSecret");
%>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>我的课程</title>
    <link href="../../lib/dropload/dropload.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css">
    <script type="text/javascript" src="../../js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/base/base.js"></script>
    <script type="text/javascript" src="../../js/ewx/waterMark.js?20190819.2"></script>
    <link href="../../css/H5/default.css" rel="stylesheet"/>
    <script type="text/javascript" src="../../lib/dropload/dropload.js"></script>
    <script src="/lib/layui/layui/layui.js"></script>
    <style>
        body{
            margin: 10px;
        }
        .duration{
            font-size: 13px;
            color: #666;
            margin-top: 10px;
        }
        .item{
            margin-bottom:10px;
            height: 100px;
            border-bottom: 1px solid #ccc;
        }
        .item:last-child{
            border: none;
        }
        .item b{
            font-size: 18px;
            font-weight: 500;
        }
        .left{
            float: left;
        }
        .left img{
            width: 170px;
            height: 90px;
        }
        .right{
            float: right;
            padding-left: 10px;
            box-sizing: border-box;
            width:calc(100% - 170px);
        }
        .btn{
            width: 60px;
            height: 25px;
            background: red;
            color: #fff;
            border-radius: 14px;
            line-height: 25px;
            float: right;
            border: none;
            margin-top: -20px;
        }
        .Img{
            margin-top: 37px;
            font-size: 25px;
            text-align: center;
        }


    </style>
<body>
<div class="content">

</div>
</body>
</head>
</html>
<script>
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        //地址取值
        function getQueryString(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        }
        var courseStage = getQueryString('courseStage')
        $.ajax({
            url:'/trCourseSchedule/showAllAndCourse',
            type:'post',
            dataType:'json',
            data:{
                isop:true,
                courseStage:courseStage
            },
            success:function (res) {
                var data = res.data
                if(res.msg=='err'){
                    var app= '<div>\n' +
                        '        <div class="Img">\n' +
                        '暂无课程'
                        '        </div>\n' +
                        '    </div>'
                    $('.content').html(app)
                }else{
                    var str = ""
                    var background = ''
                    var text =''
                    var percentage
                    for(var i=0;i<data.length;i++){
                        if(data[i].attachmentList.length>0) {
                            var learningTime=data[i].learningTime //要求
                            var studyTime = data[i].studyTime  //学习
                            str+='<div class="item"  studyType="'+res.data[i].studyType+'" id="' + res.data[i].courseId +'">\n' +
                                '        <div class="left">\n' +
                                '            <img alt="" src="/xs?'+data[i].attachmentList[0].attUrl +'"  onerror=src="../ui/img/class.png">\n' +
                                '        </div>\n' +
                                '        <div class="right">\n' +
                                '            <p><b>'+res.data[i].courseName+'</b></p>\n' +
                                '            <p class="duration">讲师:<span>'+empty(data[i].courseLecturer)+'</span></p>\n' +
                                '            <p style="margin-top: 10px"><b style="font-size:13px; color: #666;">'+res.data[i].courseIntroduce+'</b></p>\n' +
                                // '            <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo"  style="margin-top: 23px;width: 60%">\n' +
                                // '                <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>\n' +
                                // '            </div>\n' +
                                // '            <button type="button" class="btn" style="background:'+background+'">'+text+'</button>\n' +
                                '        </div>\n' +
                                '    </div>'
                        }
                    }
                    $('.content').html(str)
                    // //控制条赋值
                    // $('.layui-progress-bar').attr('lay-percent',percentage+'%');
                    // element.init();
                    // element.progress('demo', percentage+'%');
                }
            }
        })
        //判断学习时间是不是过期
        $(document).on('click', '.item', function(){
            var id = $(this).attr('id')
            window.location.href = '/train/online?id='+id
        })
        //判断返回是否为空
        function empty(esName) {
            if (esName==undefined ||esName==''){
                return ''
            }else{
                return esName
            }
        }
    });
</script>